<!--
 @description 
 @fileName index.vue
 @author zengqiongying
 @created 2023-04-20 10:10:26
-->
<template>
  <div class="group-card" :class="{ 'no-mg': noMg, round: round }">
    <slot name="title">
      <div v-if="showTitle" class="group-title">{{ title }}</div>
    </slot>
    <slot name="subtitle">
      <div v-if="showSubTitle" class="sub-title">{{ subTitle }}</div>
    </slot>
    <slot></slot>
  </div>
</template>
<script lang="ts">
  export default {
    name: 'Card'
  }
</script>
<script lang="ts" setup>
  import { defineProps, computed, toRefs } from 'vue'
  const none: any[] = [undefined, null, '']
  const props = defineProps({
    title: {
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    noMg: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: true
    }
  })
  const { title, subTitle } = toRefs(props)
  const showTitle = computed(() => {
    return !none.includes(title.value)
  })
  const showSubTitle = computed(() => {
    return !none.includes(subTitle.value)
  })
</script>
<style lang="less" scoped>
  // 分组卡片
  .group-card {
    margin: 8px 14px 0;
    padding: 16px 0;
    background: var(--bg-global-weaker);
    overflow: hidden;
    &.no-mg {
      margin-left: 0;
      margin-right: 0;
    }
    &.round {
      border-radius: 8px;
    }
    .group-title {
      padding: 0 14px;
      font: var(--font-main-title-strengthen);
      color: var(--texticon-default-strong);
    }
    .sub-title {
      padding: 0 14px;
      font: var(--font-main-body);
      color: var(--texticon-default-stronger);
    }
  }
</style>
